<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>用户中心</title>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/plugins/bootstrap/css/bootstrap.css">
 <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/plugins/font-awesome/css/font-awesome.css">
 <link   href="${pageContext.request.contextPath}/assets/plugins/layer/skin/default/layer.css" rel="stylesheet" type="text/css" /> 
 <link   href="${pageContext.request.contextPath}/assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css" />    
  <!--[if lt IE 9]>
    <script src="/bg/assets/plugins/html5shiv/html5shiv.min.js"></script>
    <script src="/bg/assets/plugins/respond/respond.min.js"></script>
  <![endif]-->
  <style type="text/css">
    .table-title{
       width:50%;
       text-align: center;
    }
    .col{
       padding-right:4px;
       padding-left:4px
    }
    .head-box{
       height:50px;
       line-height: 50px;
       text-align: center;
       font-size: 16px;
       color:#fff;
       background-color: #429BFE;
       margin-bottom:5px;
       position: relative;
    }
    .top-reback{
       float:right;
       font-size:14px;
       padding:0 10px;
       cursor:pointer;
       position: absolute;
       top:0;
       right:0;
       font-size:12px;
    }	    
    .bottom-box{
       text-align: center;
       padding:20px;
    }
    .user-info-list div{
       height:30px;
       line-height:30px;
       font-size:12px;
    }
  </style>
</head>
<body>

<div>


	<div class="main-box">
	   <div class="head-box">
	   		个人中心
		      <span class="top-reback" style="float:right;">
		                       返回
		         <i class="glyphicon glyphicon-share-alt"></i>
		      </span>	   		
	   </div>
	  <!-- Nav tabs -->
	  <ul class="nav nav-tabs" role="tablist">
	    <li role="presentation" class="table-title active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">用户个人信息</a></li>
	    <!-- <li role="presentation" class="table-title"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">申请项目信息</a></li> -->
	  </ul>
	
	  <!-- Tab panes -->
	  <div class="tab-content">
	    <div role="tabpanel" class="tab-pane active" id="home">
	      <div class="user-info-list clearfix">
	           <div class="col-xs-3 col-md-2 col text-center ">姓名：</div>
	           <div class="col-xs-3 col-md-2 col text-left" id="userName"><!-- 申升 --></div>
	           <div class="col-xs-3 col-md-2 col  text-center">性 别：</div>
	           <div class="col-xs-3 col-md-2 col text-left" id="sex"><!-- 男 --></div>
	           <div class="col-xs-3 col-md-2 col  text-center">婚姻状态：</div>
	           <div class="col-xs-3 col-md-2 col text-left" id="marrige"><!-- 已婚 --></div>	           
	           <div class="col-xs-3 col-md-2 col  text-center">出生日期：</div>
	           <div class="col-xs-3 col-md-2 col text-left" id="birthday"><!-- 2017-07-03 --></div>  
	           <div class="col-xs-3 col-md-2 col  text-center">身高：</div>
	           <div class="col-xs-3 col-md-2 col text-left" id="userheight"><!-- 50cm --></div>
	           <div class="col-xs-3 col-md-2 col  text-center">体重：</div>
	           <div class="col-xs-3 col-md-2 col text-left" id="userWeigth"><!-- 50kg --></div>	    
	           <div class="col-xs-3 col-md-2 col  text-center">所在省：</div>
	           <div class="col-xs-3 col-md-2 col text-left" id="province"><!-- 安徽省 --></div>
	           <div class="col-xs-3 col-md-2 col  text-center">所在市：</div>
	           <div class="col-xs-3 col-md-2 col text-left" id="city"><!-- 蚌埠市 --></div>	 
	           <div class="col-xs-3 col-md-2 col  text-center">手机号码：</div>
	           <div class="col-xs-9 col-md-2 col text-left" id="user_number"><!-- 15255252969 --></div>
	           	<div class="col-xs-3 col-md-2 col  text-center">身份证号码：</div>
	           <div class="col-xs-9 col-md-2 col text-left" id="user_id_card"><!-- 341182199112204615 --></div>	           	
	           <div class="col-xs-3 col-md-2 col  text-center">详细地址：</div>
	           <div class="col-xs-9 col-md-6 col text-left" id="address"><!-- 安徽省本股本是龙子湖区蚌埠市 --></div>	 
	      </div>
		  <div class="bottom-box">
		     <button class="btn btn-success"  id="editUserInfo" style="padding:6px 20px">修改个人信息</button>
		     <button class="btn btn-success"  id="addUserInfo" style="padding:6px 20px">填写个人信息</button>
		  </div>                               
        </div>
	    <div role="tabpanel" class="tab-pane" id="profile">...</div>
	  </div>	
	</div>


</div>

<!-- 修改个人信息界面 -->   
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">个人信息修改</h4>
      </div>
      <div class="modal-body clearfix">  
               <div class="col-sm-6 ">
                    <span class="hint">姓名：</span>
	                <div class="form-group">
	                    <input class="form-control" type="text" placeholder="姓名" id="username" name=""username"" />
	                </div>                  
               </div>   
               <div class="col-sm-6">
                    <span class="hint"> 身份证号： </span>
	                <div class="form-group">
	                    <input class="form-control" type="text" placeholder="32145789545214521" id="id_number" name="id_number" /> 
	                </div>               
               </div>
               <div class="col-sm-6" style="margin-bottom:15px;">
                    <span class="hint">性别： </span>
                    <select id="user_sex" name="user_sex" class="form-control">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>                
               </div>      
               <div class="col-sm-6 ">
                    <span class="hint">出生日期： </span>
	                <div class="form-group">	                	                   
	                    <input class="form-control placeholder-no-fix" type="text" id="user_birth" placeholder="1997-10-23" name="user_birth" />
	                </div>                  
               </div>                         
               <div class="col-sm-6"  style="margin-bottom:15px;">
                   <span class="hint">婚姻状态： </span>
                    <select id="user_single" name="user_single" class="form-control">
                        <option value="2">单身</option>
                        <option value="1">已婚</option>
                    </select>                
               </div>
               <div class="col-sm-6">
                    <span class="hint"> 身高(cm)： </span>
	                <div class="form-group">
	                    <input class="form-control" type="text" placeholder="180" id="user_height" name="user_height" /> 
	                </div>               
               </div>
               <div class="col-sm-6 ">
                    <span class="hint">体重(kg)： </span>
	                <div class="form-group">
	                    <input class="form-control placeholder-no-fix" type="text" placeholder="50" id="user_weight" name="user_weight" />
	                </div>                  
               </div>  
               <div class="col-sm-6"  style="margin-bottom:15px;">
                    <span class="hint">省份： </span>
                    <select id="user_province" name="user_province" class="form-control">
                        <option value="安徽">安徽</option>
                        <option value="AF">上海</option>
                        <option value="AL">北京</option>
                    </select>               
               </div>                             
               <div class="col-sm-6 "  style="margin-bottom:15px;">
                    <span class="hint">城市： </span>
                    <select id="user_city" name="user_city" class="form-control">
                        <option value="蚌埠">蚌埠</option>
                        <option value="AF">合肥</option>
                    </select>                 
               </div>               
               <div class="col-sm-6 ">
                    <span class="hint">详细地址 </span>
	                <div class="form-group">	                   
	                    <input class="form-control placeholder-no-fix" type="text" placeholder="安徽省蚌埠市龙子湖区淮海大道196号" id="user_address" name="user_address" />
	                </div>                   
               </div>   
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="save-user-info">保存</button>
      </div>
    </div>
  </div>
</div>


  <script src="${pageContext.request.contextPath}/assets/js/jquery-1.11.2.min.js" charset="utf-8" type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="${pageContext.request.contextPath}/assets/plugins//layer/mobile/layer.js"></script>
  <script src="${pageContext.request.contextPath}/assets/plugins/layer/layer.js"></script>
  <script src="${pageContext.request.contextPath}/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>  
  
  <script type="text/javascript">
  
  
  
     var cityId="";
  
     var curPage={
    		 
    		 userData:{},
    		 init:function(){
    			 this.initEvents();
    			 this.checkLogin();
    		 },
    		 initEvents:function(){
    			 var that = this;
    			 
    			 //修改个人信息
    			 $("#save-user-info").on("click",function(){
    				 that.applySaveUserInfo();
    			 })
    			 
    			 $("#user_province").on("change",function(){
    				 //alert($(this).val()+"-"+$(this).text())
    				 that.initCityInfo($(this).val());
    			 })
				 $(".top-reback").on("click",function(){
			   				window.location.href="${pageContext.request.contextPath}/Portal/portalIndex.do?rnd="+Math.random();
				}) 
		    			 
    			 $("#editUserInfo").on("click",function(){
    			   that.initUserInfo();	 
    			 })
    			 $("#addUserInfo").on("click",function(){
    			   that.initUserInfo();	 
    			 })    			 
    			 return this;
    		 },
    		 initUserInfo:function(){
    			 var that = this;
    			 that.initBirthDatePick();
    			 
    			 if(userData.NAME){
    				 $("#username").val(userData.NAME);	 
    			 }
    			 
 				 
				 //params.PASSWORD = $("#password").val();
				 if(userData.ID_NUMBER){
					 $("#id_number").val(userData.ID_NUMBER);
				 }
				 if(userData.SEX){
					 $("#user_sex").val(userData.SEX);
				 }
				
				 //params.PHONE_NUMBER = $("#phone_number").val();
				 if(userData.HEIGHT){
					 $("#user_height").val(userData.HEIGHT);
				 }
				 if(userData.WEIGHT){
					 $("#user_weight").val(userData.WEIGHT);	 
				 }
				
				 if(userData.CITY){
					 cityId=userData.CITY;
				 }
				
				 var provinceId="";
				 if(userData.PROVINCE){
					 provinceId = userData.PROVINCE;
				 }
				 if(userData.ADDRESS){
					 $("#user_address").val(userData.ADDRESS);
				 }
				  
				 if(userData.MARRIAGE){
					 $("#user_single").val(userData.MARRIAGE);
				 }
				 if(userData.BIRTHDAY){
					 $("#user_birth").val(that.dataformat(userData.BIRTHDAY.time));
				 }
				 
				 if(userData.BIRTHDAY.time){
					 $("#user_birth").val(that.dataformat(userData.BIRTHDAY.time));
				 }else{
					 $("#user_birth").val(that.dataformat(userData.BIRTHDAY));
				 }
				

				 var params={};
 				 params.PARENT='province_city_area';				 
    			 $.post("${pageContext.request.contextPath}/Portal/portal/GPVE01.do",params,function(result){       				  
    				 var html ="";
    				 if(result.state==200){
    					 for(var i=0;i<result.data.length;i++){
    						 if(result.data[i].CODE==provinceId){
    							 html +='<option value="'+result.data[i].CODE+'" selected="true">"'+result.data[i].NAME+'"</option>';	
    						 }else{
    							 html +='<option value="'+result.data[i].CODE+'">"'+result.data[i].NAME+'"</option>';	
    						 }
    					 } 
    					 $("#user_province").html(html);
    					 
    					 curPage.initCityInfo(provinceId);
    				 }
    			 })   				 
				 $('#myModal').modal("show")
    			 return that;
    		 },
    		 applySaveUserInfo:function(){
    			 var params = {};    				
 				 params.NAME = $("#username").val();
				 //params.PASSWORD = $("#password").val();
				 params.ID_NUMBER = $("#id_number").val();
				 params.SEX=$("#user_sex   option:selected").val();
				 //params.PHONE_NUMBER = $("#phone_number").val();
				 params.HEIGHT = $("#user_height").val();
				 params.WEIGHT = $("#user_weight").val();
				 params.PROVINCE = $("#user_province  option:selected").val();
				 params.PROVINCE_NAME = $("#user_province  option:selected").text();
				 params.CITY = $("#user_city  option:selected").val();
				 params.CITY_NAME = $("#user_city  option:selected").text();
				 
				 params.ADDRESS = $("#user_address").val();
				 if($.trim(params.ADDRESS)==""){
					 layer.msg("请填写详细地址!");
					 return false;
				 }	
				 params.MARRIAGE = $("#user_single   option:selected").val();
			 
				 params.BIRTHDAY = $("#user_birth").val();
				 if($.trim(params.BIRTHDAY)==""){
					 layer.msg("请选择出生日期!");
					 return false;
				 }
				 
	 
  				  if($.trim(params.NAME)==""){    
  					layer.msg("对不起，姓名不能为空!");//请将“字符串类型”要换成你要验证的那个属性名称！    
  					return false
  				  }
/* 				 var  regpassword=/^[a-zA-Z0-9_]+$/; 
  				 if(!regpassword.test(params.PASSWORD) || $.trim(params.PASSWORD)==""){    
  					layer.msg("对不起，请输入正确的密码!");//请将“字符串类型”要换成你要验证的那个属性名称！
  					return false
  				 } */
				 var  regid_number=/^\d{15}|\d{18}$/; 
  				 if(!regid_number.test(params.ID_NUMBER) || $.trim(params.ID_NUMBER)==""){    
  					layer.msg("对不起，请输入正确的身份证号!");//请将“字符串类型”要换成你要验证的那个属性名称！
  					return false
  				 } 
				 var  reguser_height=/^[0-9]*$/; 
  				 if(!reguser_height.test(params.HEIGHT) || $.trim(params.HEIGHT)==""){    
  					layer.msg("对不起，请输入身高!");//请将“字符串类型”要换成你要验证的那个属性名称！
  					return false
  				 } 
				 var  reguser_height=/^[0-9]*$/; 
  				 if(!reguser_height.test(params.WEIGHT) || $.trim(params.WEIGHT)==""){    
  					layer.msg("对不起，请输入体重!");//请将“字符串类型”要换成你要验证的那个属性名称！
  					return false
  				 }
    			 $.post("${pageContext.request.contextPath}/Portal/portal/UAU01.do?rnd="+Math.random(),params,function(result){
    				 if(result.state==200){
    					 curPage.checkLogin();
    					 $('#myModal').modal("hide")
    					 layer.msg("修改成功");
    				 } else {
    					 layer.msg(result.msg);
    					 return false;
    				 }        				 
    			 })  				 
    		 },    		 
    		 initCityInfo:function(provinceId){
				 var params={};
				 params.PARENT=provinceId;	
				 
				 var city = curPage.userData;
				 
	   			  $.post("${pageContext.request.contextPath}/Portal/portal/GPVE01.do",params,function(result){   
					  var ss = result;
					 var html ="";					 
					 if(result.state==200){ 						 
						 for(var i=0;i<result.data.length;i++){
							 if(result.data[i].CODE==cityId){
								 html +='<option value="'+result.data[i].CODE+'" selected="true">"'+result.data[i].NAME+'"</option>';	 
							 }else{
								 html +='<option value="'+result.data[i].CODE+'">"'+result.data[i].NAME+'"</option>';
							 }
							 	 
						 } 
						 $("#user_city").html(html);
					 }
				  })  
    		 },
    		 checkLogin:function(){
    			 var that = this;    			 
    			 $.post("${pageContext.request.contextPath}/Portal/portal/CKL01.do?rnd="+Math.random(),function(result){
    				 if(result.state==1){
    					 
    					 userData=result.data;
    					 
    					 if(result.data.NAME && result.data.NAME!=""){
    						 $("#userName").text(result.data.NAME);
    					 }else{
    						 $("#userName").text("待完善");
    					 }
    					 if(result.data.SEX && result.data.SEX!=""){
    						 if(result.data.SEX=="1"){
    							 $("#sex").text("男"); 
    						 }else{
    							 $("#sex").text("女");
    						 }
    					 }else{
    						 $("#sex").text("待完善");
    					 }  
    					 if(result.data.MARRIAGE && result.data.MARRIAGE!=""){
    						 if(result.data.MARRIAGE=="2"){
    							 $("#marrige").text("单身"); 
    						 }else{
    							 $("#marrige").text("已婚");
    						 }
    					 }else{
    						 $("#marrige").text("待完善");
    					 }      					 
    					 
    					 
    					 if(result.data.BIRTHDAY && result.data.BIRTHDAY!=""){
    						 
    						 if(result.data.BIRTHDAY.time){
    							 $("#birthday").text(that.dataformat(result.data.BIRTHDAY.time));	 
    						 }else{
    							 $("#birthday").text(result.data.BIRTHDAY);
    						 }
    						 
    						 
    					 }else{
    						 $("#birthday").text("待完善");
    					 }  
    					 if(result.data.HEIGHT && result.data.HEIGHT!=""){
    						 $("#userheight").text(result.data.HEIGHT+"CM");
    					 }else{
    						 $("#userheight").text("待完善");
    					 } 
    					 if(result.data.WEIGHT && result.data.WEIGHT!=""){
    						 $("#userWeigth").text(result.data.WEIGHT+"KG");
    					 }else{
    						 $("#userWeigth").text("待完善");
    					 }  
    					 if(result.data.PROVINCE && result.data.PROVINCE!=""){
    						 $("#province").text(result.data.PROVINCE_NAME);
    					 }else{
    						 $("#province").text("待完善");
    					 } 
    					 if(result.data.CITY && result.data.CITY!=""){
    						 $("#city").text(result.data.CITY_NAME);
    					 }else{
    						 $("#city").text("待完善");
    					 } 
    					 if(result.data.PHONE_NUMBER && result.data.PHONE_NUMBER!=""){
    						 $("#user_number").text(result.data.PHONE_NUMBER);
    					 }else{
    						 $("#user_number").text("待完善");
    					 }     
    					 if(result.data.ID_NUMBER && result.data.ID_NUMBER!=""){
    						 $("#user_id_card").text(result.data.ID_NUMBER);
    					 }else{
    						 $("#user_id_card").text("待完善");
    					 }  
    					 if(result.data.ADDRESS && result.data.ADDRESS!=""){
    						 $("#address").text(result.data.ADDRESS);
    					 }else{
    						 $("#address").text("待完善");
    					 }     					 
    					
    				 }else{
    					 window.location.href="${pageContext.request.contextPath}/Portal/portalIndex.do"
    				 }
    			 })    			 
    			 return that;
    		 },
    		 initBirthDatePick:function(){
    			 var that = this;
                 $('#user_birth').datetimepicker({
                     format: 'yyyy-mm-dd',
                     weekStart: 1,
                     autoclose: true,
                     todayBtn:  1, 
                     startView: 2,
                     todayHighlight: 1,
                     showMeridian: 1,
                     minView: 3,
                     forceParse: false,
                     language: 'zh'
                 });      			 
    			 return that;
    		 },
    		  dataformat:function(format){    			  
    			  try{
        			  var date = new Date(format);
        			  var year = date.getFullYear();
        			  var month = date.getMonth()+1;
        			  var day = date.getDate();
        			  if(month<10){
        				  return year +"-"+"0"+month+"-"+day;  
        			  }else{
        				  return year +"-"+month+"-"+day;
        			  }        			  
    			  }   catch(e){
    				  return format
    			  } 
    		  }
     }
     
     $(function(){
    	 
    	 curPage.init();
     })
  </script>
  
  
</body>
</html>